<template>
  <div :class="['download-side-bar',siderBg]">
    <div class="download-side-bar-title">
      下载列表
    </div>
    <div class="download-list-wrapper">
      <div
        v-for="item in list"
        :key="item.id"
        :class="`download-list-item ${item.showDot?'dot':''} ${activeMenu === item.id ? 'active' : ''}`"
        @click="changeTab(item.id)"
      >
        <svg-icon
          :icon-class="activeMenu === item.id ? item.hoverIcon : item.normalIcon"
          :size="20"
        />
        <div>{{ item.title }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { useDownloadManageMenu } from '@/stores/download-manage-menu'
import {useDownloadManage1 } from '@/stores/download-manage1'
import { storeToRefs } from 'pinia';
import { invokeAsyncAPi } from '@/utils/xz-fn'
import { useDownloadManageWindow } from '@/stores/download-manage-window'
import {useEnvConfig} from '@/config'
const {ENV_CONFIG} = useEnvConfig()
console.log(ENV_CONFIG,'---ENV_CONFIG----')
const downloadManageMenuStore = useDownloadManageMenu();
const { activeMenu } = storeToRefs(downloadManageMenuStore)

const downloadManageStore = useDownloadManage1();
const { downloadFinishRedFlag}=storeToRefs(downloadManageStore)
// const active = ref('1');
const downloadManageWindowStore = useDownloadManageWindow()
const { masterWindowId } = storeToRefs(downloadManageWindowStore)

const list = computed(() => {
  return  [{
    id: '1',
    title: '正在下载',
    showDot:false,
    normalIcon: 'download-arrow-white',
    hoverIcon: 'download-arrow-color'
  }, {
    title: '下载记录',
    id: '2',
    showDot:downloadFinishRedFlag.value,
    normalIcon: 'download-record-white',
    hoverIcon: 'download-record-color'
  }]
})

const changeTab = (id: string) => {
  downloadManageMenuStore.setActiveMenu(id);
  if (id === '2') {
    invokeAsyncAPi('fq_NotifyWebMessageEx', masterWindowId.value, 'reset-download-finish-red-flag')
  }
}
const siderBg = `bg-${ENV_CONFIG.type}`
</script>

<style scoped lang="scss">
.download-side-bar {
  font-size: 12px;
  position: absolute;
  left: 12px;
  top: 46px;
  width: 126px;
  bottom: 20px;
  background: #192655;
  border-radius: 6px;
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  color: #FFFFFF;
  background-size: cover;
  background-repeat: no-repeat;
  &.bg-cs{
    background-image: url(../../assets/bg-cs.png);
  }
  &.bg-pvz {
    background-image: url(../../assets/bg-pvz.png);
  }
  &.bg-redAlert {
    background-image: url(../../assets/bg-redAlert.png);
  }
  &.bg-spiderPaper {
    background-image: url(../../assets/bg-spiderPaper.png);
  }
  &.bg-warcraft {
    background-image: url(../../assets/bg-warcraft.png);
  }
  .download-side-bar-title {
    margin: 23px 0 18px 0;
    text-align: center;
  }

  .download-list-wrapper {
    display: flex;
    flex-direction: column;
    gap: 5px;

    .download-list-item {
      display: flex;
      gap: 5px;
      align-items: center;
      justify-content: center;
      height: 34px;
      gap: 8px;
      cursor: pointer;
      margin: 0 12px 0 6px;
      border-radius: 4px;
      position: relative;
      &.dot::after{
        content: '';
        position: absolute;
        width:8px;
        height: 8px;
        border-radius: 50%;
        background:#E00000;
        top:5px;
        right:5px;
      } 
      &:hover {
        background: rgba(255, 255, 255, 0.3);
      }

      &.active {
        background: #fff;
        color: #192655;

      }
    }
  }
}
</style>